<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单控件</title>
    <style>
        #btn{
            /* border: 1px solid green; */

            background-color: red;
            border: 0;
            height: 40px;
            color: white;
            width: 100px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <!-- action指向后端的提交地址.  method - 请求的方式,默认是get,还有post -->
    <form action="http://www.baidu.com" method="get">
        <!-- 普通文本框
        maxlength - 文本框可以输入的最大的长度.

        pattern配合required一起使用

        readonly - 只读
        -->
        <input type="text" placeholder="请输入用户名" autofocus required pattern="[a-z]\w{4}">

        <br>
        <input type="password" name="" id="">

        <br>
        <!-- 浏览器兼容性不行 -->
        <input type="date" name="" id="">
        <br>

        <input type="number" value="10" min="6" max="20" step="2">

        <br>

        <input type="email" name="" id="" required>

        <br>

        <input type="range" min="0" max="10">

        <br>
        <!-- 同一组的单选效果,保证name属性值是一样的 -->
        男 <input type="radio" name="sex" id="" value="M" checked>
        女 <input type="radio" name="sex" id="" value="F">

        <br>

        hobbies: 睡觉<input type="checkbox" name="hb" checked> 
                coding<input type="checkbox" name="hb">

        <br>
        <!-- multiple -->
        <select>
            <option value="-1">===学历===</option>
            <option value="2">本科</option>
            <option value="2">大专</option>
            <option value="2">硕士</option>
        </select>

        <br>

        <!-- 只能选择一个文件 -->
        <input type="file" name="" id="">
        <!-- 可以选择多个文件 -->
        <input type="file" name="" id="" multiple>

        <br>

        <!-- 富文本编辑器 -->
        <textarea cols="20" rows="6"></textarea>

        <br>
        <!-- 关于按钮 -->
        <input type="submit" value="提交按钮">

        <input type="button" value="普通按钮">

        <input type="reset" value="重置按钮">

        <!-- 如果没有写type,默认是submit -->
        <button type="submit">提交按钮btn</button>
        <button type="button">普通按钮btn</button>
        <button type="reset" id="btn">重置按钮btn</button>

        <!-- 提交 -->
        <input type="image" src="imgs/gif-0004.gif" alt="">
    </form>
</body>
</html>